<template>
  <div>
    <el-form :model="queryParam" :inline=true style="display: flex">
      <el-form-item label="工程">
        <el-input v-model="queryParam.productCode" style="width:160px"/>
      </el-form-item>
      <el-form-item label="事件">
        <el-input v-model="queryParam.eventType" style="width:160px"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="queryParam.status" style="width:160px"/>
      </el-form-item>
      <el-form-item label="名字">
        <el-input v-model="queryParam.name" style="width:160px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryPage">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="name" label="名字" width="80"></el-table-column>
      <el-table-column prop="productCode" label="工程" width="80"></el-table-column>
      <el-table-column prop="eventType" label="事件" width="120"></el-table-column>
      <el-table-column prop="version" label="版本" width="80"></el-table-column>
      <el-table-column prop="status" label="状态" width="80"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="320">
        <template slot-scope="scope">
          <div class="typeEnter"> {{ parseTime(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button @click="handleAddOrUpdate(true,scope.row)" type="text">新增版本</el-button>
          <el-button @click="handleDetail(scope.row)" type="text">历史详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal>0"
      :total="pageTotal"
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="queryPage"
    />


    <!--  添加或修改配置对话框-->
    <el-dialog :title=title :visible.sync="open" width="1000px">
      <el-row>
        <el-col :span="18">
          <el-form ref="form" :model="form">
            <el-form-item label="版本">
              <el-input v-model="form.version" style="width:400px" placeholder="请输入版本"/>
            </el-form-item>
            <el-transfer v-model="form.valueList" style="text-align: left"
                         filterable
                         :filter-method="filterMethod"
                         filter-placeholder="请输入策略名"
                         :titles="['可选策略', '已选策略']"
                         :data="strategyList"
                         @change="changeTransferItem">
            </el-transfer>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: left">
          <p>{{ flowCode }}</p>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="translateFlow">翻译</el-button>
        <el-button type="primary" @click="saveOrUpdateFlow">保存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--  详情列表 -->
    <el-dialog :title=title2 :visible.sync="open2" width="1400px">
      <el-table :data="tableData2" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"></el-table-column>
        <el-table-column prop="version" label="版本" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="80"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            <div class="typeEnter"> {{ parseTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="策略项" width="400">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.strategyConfs">{{ item.name + '->' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="activateVersion(scope.row)" type="text">设为默认</el-button>
            <el-button @click="handleAddOrUpdate(false,scope.row)" type="text">编辑版本</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import {parseTime} from '@/utils'

export default {
  data() {
    return {
      // 编辑的窗口
      open: false,
      title: '',
      isAdd: false,
      form: {
        projectId: '',
        version: '',
        valueList: []
      },
      strategyList: [],
      tableDataStrategy: [],

      //代码
      flowCode: '',

      // 窗口2
      open2: false,
      title2: '',
      form2: {},
      tableData2: [],

      // 查询参数
      pageTotal: 0,
      queryParam: {
        productCode: '',
        eventType: '',
        status: '',
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  mounted() {
    this.pageList()
    this.strategyPageList()
  },
  methods: {
    parseTime,
    queryPage() {
      this.pageList()
    },
    pageList() {
      let _this = this
      this.$api.projectPageList(_this.queryParam).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data.pageList
          _this.pageTotal = res.data.pageTotal
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //版本详情
    versionDetail(row) {
      let _this = this
      this.$api.projectHistPageList({projectId: row.id, pageSize: 1000}).then(res => {
        if (res.code === '00000') {
          _this.tableData2 = res.data.pageList
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //策略
    strategyPageList() {
      let _this = this
      this.$api.strategyPageList({pageSize: 1000}).then(res => {
        if (res.code === '00000') {
          _this.tableDataStrategy = res.data.pageList
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //翻译流程
    translateFlow() {
      let _this = this
      let param = {
        strategyIds: this.form.valueList
      }
      this.$api.translateFlow(param).then(res => {
        if (res.code === '00000') {
          _this.flowCode = res.data
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //保存或者更新流程
    saveOrUpdateFlow() {
      let _this = this
      let param = {
        projectId: this.form.projectId,
        version: this.form.version,
        strategyIds: this.form.valueList,
        isAdd: this.isAdd
      }
      this.$api.projectSaveFlow(param).then(res => {
        if (res.code === '00000') {
          _this.$message("保存成功")
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //激活版本
    activateVersion(row) {
      let _this = this
      this.$api.activateVersion({projectId: row.projectId, version: row.version}).then(res => {
        if (res.code === '00000') {
          _this.$message("激活成功")
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    },

    //改变元素了
    changeTransferItem(param) {
      this.flowCode = ''
    },
    //列表
    handleDetail(row) {
      this.open2 = true
      this.title2 = '版本列表_' + row.productCode + '_' + row.eventType
      this.versionDetail(row)
    },

    // 取消按钮
    cancel() {
      this.open = false
    },

    // 打开更新数据窗口
    handleAddOrUpdate(isAdd, row) {
      this.open = true
      this.isAdd = isAdd
      this.flowCode = ''
      if (isAdd) {
        //数据填充
        this.strategyList = []
        this.tableDataStrategy.forEach(e => {
          this.strategyList.push({label: e.name, key: e.id})
        })

        this.form.valueList = []
        this.form.version = ''
        this.form.projectId = row.id

        this.title = '新增版本_' + row.productCode + '_' + row.eventType
      } else {
        //数据填充
        this.strategyList = []
        this.tableDataStrategy.forEach(e => {
          this.strategyList.push({label: e.name, key: e.id})
        })

        this.form.projectId = row.projectId
        this.form.version = row.version

        this.title = '编辑版本_' + row.project.productCode + '_' + row.project.eventType

        this.form.valueList = []
        row['strategyConfs'].forEach(e => {
          this.form.valueList.push(e.id)
        })
      }
    },

    filterMethod(query, item) {
      return true
    }
  }
}
</script>
